<template>
  <div class="category">
    <!-- 头部search -->
    <comp-hdserach :ctitle="'分类'"></comp-hdserach>
    <!-- 分类列表区 banner-->
    <div class="cat-container">
      <!-- 列表导航区 -->
      <div class="con-list">
        <ul>
          <li
            v-for="(e, i) in leftArrary"
            v-bind:key="i"
            @click="sendIndex(i)"
            :class="dataChild == i ? 'active' : ''"
            data-index="`${i}`"
          >
            {{ e }}
          </li>
        </ul>
      </div>
      <!-- banner -->
       <transition
        :duration="{ enter: 500, leave: 800 }"
        enter-active-class="animate__animated animate__fadeInLeft"
        enter-to-class="animate__animated animate__fadeInLeft"
        leave-active-class="animate__animated animate__fadeInLeft"
        leave-to-class="animate__animated animate__fadeInLeft"
      >
        <!-- 动态组件 -->
    
      <comp-minbanner v-on:child-click="myRev" :key="timer" :send="dataChild">
        <!-- 具名插槽 添加每一页的内容 -->

        <!-- 第零列 -->
        <!-- 第零列 -->
        <!-- 第零列 -->
        <template v-slot:s0>
          <!-- <h1>s0</h1> -->
          <div class="cat-s0">
            <!-- 背景图 加 文字居中 -->
            <ul class="bgTxt-list">
              <li v-for="(e, i) in rightObj" v-bind:key="i">
                <img :src="`${e.img}`" alt="" />
                <span>{{ e.title }}</span>
              </li>
            </ul>
            <!-- 推荐用户 -->
            <comp-categorywu :ctitle="'推荐用户'">
              <slot>
                <ul class="comp-categorywu-list-1">
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <span>用户</span>
                  </li>
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <span>用户</span>
                  </li>
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <span>用户</span>
                  </li>
                </ul>
              </slot>
            </comp-categorywu>
            <!-- 近期热点 -->
            <comp-categorywu :ctitle="'近期热点'">
              <slot>
                <ul class="comp-categorywu-list-2">
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <span>热点热点热点热点热点</span>
                  </li>
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <span>热点</span>
                  </li>
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <span>热点</span>
                  </li>
                </ul>
              </slot>
            </comp-categorywu>
            <!-- 推荐作者 -->
            <comp-category :ctitle="'推荐作者'">
              <slot>
                <ul class="comp-category-list-1">
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <div class="cate-txt">
                      <span>@暮云</span>
                      <p>
                        人生最好的三种状态：不期而遇、不言而喻、不药而愈。
                        人生最差的三种状态：情不自禁、言不由衷、身不由己
                      </p>
                    </div>
                  </li>
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <div class="cate-txt">
                      <span>@暮云</span>
                      <p>
                        人生最好的三种状态：不期而遇、不言而喻、不药而愈。
                        人生最差的三种状态：情不自禁、言不由衷、身不由己
                      </p>
                    </div>
                  </li>
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <div class="cate-txt">
                      <span>@暮云</span>
                      <p>
                        人生最好的三种状态：不期而遇、不言而喻、不药而愈。
                        人生最差的三种状态：情不自禁、言不由衷、身不由己
                      </p>
                    </div>
                  </li>
                </ul>
              </slot>
            </comp-category>
            <!-- 推荐话题 -->
            <comp-category :ctitle="'推荐话题'">
              <slot>
                <ul class="comp-category-list-2">
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAq9f.png"
                      alt=""
                    />
                    <p>有哪些歌词让你记忆尤深</p>
                  </li>
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAq9f.png"
                      alt=""
                    />
                    <p>有哪些歌词让你记忆尤深</p>
                  </li>
                </ul>
              </slot>
            </comp-category>
          </div>
        </template>

        <!-- 第一列 -->
        <!-- 第一列 -->
        <!-- 第一列 -->
        <template v-slot:s1>
          <div class="cat-s1">
            <!-- 频道 -->
            <comp-categorywu :ctitle="'频道'">
              <slot>
                <ul class="s1-channel">
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAIHA.jpg"
                      alt=""
                    />
                    <p>但行好事莫问前程</p>
                    <span>最新</span>
                  </li>
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZASfK.jpg"
                      alt=""
                    />
                    <p>不乱于心不困于情</p>
                    <span>最新</span>
                  </li>
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <p>凡是过往皆为序章</p>
                    <span>最新</span>
                  </li>
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <span>最新</span>
                  </li>
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <span>最新</span>
                  </li>
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <span>最新</span>
                  </li>
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <span>最新</span>
                  </li>
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <span>最新</span>
                  </li>
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <span>最新</span>
                  </li>
                </ul>
              </slot>
            </comp-categorywu>
            <!-- 热门标签 -->
            <comp-categorywu :ctitle="'热门标签'">
              <slot>
                <ul class="s1-hot">
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <span>热门</span>
                  </li>
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <span>热门</span>
                  </li>
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <span>热门</span>
                  </li>
                </ul>
              </slot>
            </comp-categorywu>
            <!-- 猜你喜欢 -->
            <comp-categorywu :ctitle="'猜你喜欢'">
              <slot>
                <ul class="s1-hot">
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <span>热门</span>
                  </li>
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <span>热门</span>
                  </li>
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <span>热门</span>
                  </li>
                </ul>
              </slot>
            </comp-categorywu>
          </div>
        </template>
        <!-- 第二列 -->
        <!-- 第二列 -->
        <!-- 第二列 -->
        <template v-slot:s2>
          <div class="cat-s2">
            <ul class="lines">
              <li>
                <img src="../assets/imgs/03.jpeg" alt="" />
                <p>随便看看台词</p>
              </li>
              <li>
                <img src="../assets/imgs/03.jpeg" alt="" />
                <p>随便看看台词</p>
              </li>
            </ul>
            <!-- 近期热门 -->
            <comp-categorywu :ctitle="'近期热门'">
              <slot>
                <ul class="s2-hot">
                  <li>
                    <img src="../assets/imgs/04.jpeg" alt="" />
                    <p>《送你一朵小花花》</p>
                  </li>
                  <li>
                    <img src="../assets/imgs/04.jpeg" alt="" />
                    <p>《送你一朵小花花》</p>
                  </li>
                  <li>
                    <img src="../assets/imgs/04.jpeg" alt="" />
                    <p>《送你一朵小花花》</p>
                  </li>
                </ul>
              </slot>
            </comp-categorywu>
            <!-- 电影台词 -->
            <comp-category :ctitle="'电影台词'">
              <slot>
                <ul class="s2-hot">
                  <li>
                    <img src="../assets/imgs/04.jpeg" alt="" />
                    <p>《大话西游》</p>
                  </li>
                  <li>
                    <img src="../assets/imgs/04.jpeg" alt="" />
                    <p>《银河补习班》</p>
                  </li>
                  <li>
                    <img src="../assets/imgs/04.jpeg" alt="" />
                    <p>《我的少年》</p>
                  </li>
                </ul>
              </slot>
            </comp-category>
            <!-- 电视剧台词 -->
            <comp-category :ctitle="'电视剧台词'">
              <slot>
                <ul class="s2-hot">
                  <li>
                    <img src="../assets/imgs/04.jpeg" alt="" />
                    <p>《大话西游》</p>
                  </li>
                  <li>
                    <img src="../assets/imgs/04.jpeg" alt="" />
                    <p>《银河补习班》</p>
                  </li>
                  <li>
                    <img src="../assets/imgs/04.jpeg" alt="" />
                    <p>《我的少年》</p>
                  </li>
                </ul>
              </slot>
            </comp-category>
          </div>
        </template>
        <!-- 第三列 -->
        <!-- 第三列 -->
        <!-- 第三列 -->
        <template v-slot:s3>
          <div class="cat-s3">
            <ul class="lines">
              <li>
                <img src="../assets/imgs/03.jpeg" alt="" />
                <p>随便看看台词</p>
              </li>
              <li>
                <img src="../assets/imgs/03.jpeg" alt="" />
                <p>随便看看台词</p>
              </li>
            </ul>
            <ul class="lines-topic">
              <li>
                <img src="../assets/imgs/07.jpeg" alt="" />
                <p>>>话题广场>></p>
              </li>
            </ul>
            <!-- 推荐话题 -->
            <comp-category :ctitle="'推荐话题'">
              <slot>
                <ul class="s3-recommend">
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <div class="cate-txt">
                      <span>有哪些句子第一眼就触</span>
                      <p>星河滚烫,你是人间理想星河滚烫,你是人间理想</p>
                    </div>
                  </li>
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <div class="cate-txt">
                      <span>有哪些歇词让你记忆尤深歌</span>
                      <p>
                        人生最好的三种状态：不期而遇、不言而喻、不药而愈。
                        人生最差的三种状态：情不自禁、言不由衷、身不由己
                      </p>
                    </div>
                  </li>
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <div class="cate-txt">
                      <span>你最喜欢的一句话</span>
                      <p>
                        人生最好的三种状态：不期而遇、不言而喻、不药而愈。
                        人生最差的三种状态：情不自禁、言不由衷、身不由己
                      </p>
                    </div>
                  </li>
                </ul>
              </slot>
            </comp-category>
            <!-- 热门话题 -->
            <comp-category :ctitle="'热门话题'">
              <slot>
                <ul class="lines-topic">
                  <li>
                    <img src="../assets/imgs/07.jpeg" alt="" />
                    <p>#520心动信号 有爱说出来</p>
                  </li>
                </ul>
              </slot>
            </comp-category>
          </div>
        </template>
        <!-- 第四列 -->
        <!-- 第四列 -->
        <!-- 第四列 -->
        <template v-slot:s4>
          <div class="cat-s2">
            <ul class="lines">
              <li>
                <img src="../assets/imgs/03.jpeg" alt="" />
                <p>金典摘抄</p>
              </li>
              <li>
                <img src="../assets/imgs/03.jpeg" alt="" />
                <p>热门摘抄</p>
              </li>
            </ul>
            <!-- 推荐专辑 -->
            <comp-categorywu :ctitle="'推荐专辑'">
              <slot>
                <ul class="s2-hot">
                  <li>
                    <img src="../assets/imgs/04.jpeg" alt="" />
                    <p>《送你一朵小花花》</p>
                  </li>
                  <li>
                    <img src="../assets/imgs/04.jpeg" alt="" />
                    <p>《送你一朵小花花》</p>
                  </li>
                  <li>
                    <img src="../assets/imgs/04.jpeg" alt="" />
                    <p>《送你一朵小花花》</p>
                  </li>
                </ul>
              </slot>
            </comp-categorywu>
            <!-- 热门专辑 -->
            <comp-category :ctitle="'热门专辑'">
              <slot>
                <ul class="s2-hot">
                  <li>
                    <img src="../assets/imgs/04.jpeg" alt="" />
                    <p>《大话西游》</p>
                  </li>
                  <li>
                    <img src="../assets/imgs/04.jpeg" alt="" />
                    <p>《银河补习班》</p>
                  </li>
                  <li>
                    <img src="../assets/imgs/04.jpeg" alt="" />
                    <p>《我的少年》</p>
                  </li>
                </ul>
              </slot>
            </comp-category>
            <!-- 随便看看 -->
            <comp-category :ctitle="'随便看看'">
              <slot>
                <ul class="s2-hot">
                  <li>
                    <img src="../assets/imgs/04.jpeg" alt="" />
                    <p>《大话西游》</p>
                  </li>
                  <li>
                    <img src="../assets/imgs/04.jpeg" alt="" />
                    <p>《银河补习班》</p>
                  </li>
                  <li>
                    <img src="../assets/imgs/04.jpeg" alt="" />
                    <p>《我的少年》</p>
                  </li>
                </ul>
              </slot>
            </comp-category>
          </div>
        </template>
        <!-- 第五列 -->
        <!-- 第五列 -->
        <!-- 第五列 -->
        <template v-slot:s5>
          <div class="cat-s5">
            <ul class="lines">
              <li>
                <img src="../assets/imgs/03.jpeg" alt="" />
                <p>随便看看句子</p>
              </li>
              <li>
                <img src="../assets/imgs/03.jpeg" alt="" />
                <p>热门句子</p>
              </li>
            </ul>
            <!-- 推荐作者 -->
            <comp-category :ctitle="'推荐作者'">
              <slot>
                <ul class="s5-author">
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <div class="cate-txt">
                      <span>有哪些句子第一眼就触</span>
                      <p>星河滚烫,你是人间理想星河滚烫,你是人间理想</p>
                    </div>
                  </li>
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <div class="cate-txt">
                      <span>有哪些歇词让你记忆尤深歌</span>
                      <p>
                        人生最好的三种状态：不期而遇、不言而喻、不药而愈。
                        人生最差的三种状态：情不自禁、言不由衷、身不由己
                      </p>
                    </div>
                  </li>
                  <li>
                    <img
                      src="https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg"
                      alt=""
                    />
                    <div class="cate-txt">
                      <span>你最喜欢的一句话</span>
                      <p>
                        人生最好的三种状态：不期而遇、不言而喻、不药而愈。
                        人生最差的三种状态：情不自禁、言不由衷、身不由己
                      </p>
                    </div>
                  </li>
                </ul>
              </slot>
            </comp-category>
          </div>
        </template>
        <!-- 第六列 -->
        <!-- 第六列 -->
        <!-- 第六列 -->
        <template v-slot:s6>
          <div class="cat-s6">
            <comp-categorywu :ctitle="'诗词标签'">
              <ul class="lines">
                <li>
                  <img src="https://z3.ax1x.com/2021/11/04/IZAETI.jpg" alt="" />
                  <p>春天</p>
                </li>
                <li>
                  <img src="https://img0.baidu.com/it/u=3555537202,4158918458&fm=26&fmt=auto" alt="" />
                  <p>秋天</p>
                </li>
                <li>
                  <img src="https://img1.baidu.com/it/u=725517171,1925406764&fm=26&fmt=auto" alt="" />
                  <p>伤感</p>
                </li>
                <li>
                  <img src="https://img0.baidu.com/it/u=3675949574,958839343&fm=26&fmt=auto" alt="" />
                  <p>离别</p>
                </li>
                <li>
                  <img src="https://img0.baidu.com/it/u=2811581921,941235068&fm=26&fmt=auto" alt="" />
                  <p>抒情</p>
                </li>
                <li>
                  <img src="https://img0.baidu.com/it/u=102826352,1880765723&fm=26&fmt=auto" alt="" />
                  <p>思念</p>
                </li>
              </ul>
            </comp-categorywu>
          </div>
        </template>
        <!-- 第七列 -->
        <!-- 第七列 -->
        <!-- 第七列 -->
        <template v-slot:s7>
          <div class="cat-s7">
            <comp-categorywu :ctitle="'春季'">
              <ul class="s7-season">
                <li v-for="(e, i) in season[0].chun" v-bind:key="i">
                  <img
                    src="https://img2.baidu.com/it/u=1487052154,2751109589&fm=26&fmt=auto"
                    alt=""
                  />
                  <span class="season">{{ e.time }}</span>
                  <span class="season-time">{{ e.dTime }}</span>
                </li>
              </ul>
            </comp-categorywu>
            <comp-categorywu :ctitle="'夏季'">
              <ul class="s7-season">
                <li v-for="(e, i) in season[0].xia" v-bind:key="i">
                  <img
                    src="http://lc-cb.xyz/%E5%9B%BE%E7%89%87/season/dongzhi.png"
                    alt=""
                  />
                  <span class="season">{{ e.time }}</span>
                  <span class="season-time">{{ e.dTime }}</span>
                </li>
              </ul>
            </comp-categorywu>
            <comp-categorywu :ctitle="'秋季'">
              <ul class="s7-season">
                <li v-for="(e, i) in season[0].qiu" v-bind:key="i">
                  <img
                    src="http://lc-cb.xyz/%E5%9B%BE%E7%89%87/season/chushu.png"
                    alt=""
                  />
                  <span class="season">{{ e.time }}</span>
                  <span class="season-time">{{ e.dTime }}</span>
                </li>
              </ul>
            </comp-categorywu>
            <comp-categorywu :ctitle="'冬季'">
              <ul class="s7-season">
                <li v-for="(e, i) in season[0].dong" v-bind:key="i">
                  <img
                    src="http://lc-cb.xyz/%E5%9B%BE%E7%89%87/season/daxue.png"
                    alt=""
                  />
                  <span class="season">{{ e.time }}</span>
                  <span class="season-time">{{ e.dTime }}</span>
                </li>
              </ul>
            </comp-categorywu>
          </div>
        </template>
        <!-- 第八列 -->
        <!-- 第八列 -->
        <!-- 第八列 -->
        <template v-slot:s8>
          <div class="cat-s8">
            <comp-category :ctitle="'推荐话题'">
              <slot>
                <ul class="s8-topic">
                  <li v-for="(e, i) in data8" v-bind:key="i">
                    <img :src="`${e.cover}`" alt="" />
                    <p>{{ e.content }}</p>
                  </li>
                </ul>
              </slot>
            </comp-category>
          </div>
        </template>
      </comp-minbanner>
        </transition>
    </div>

    <!-- </div> -->
    <!-- 底部导航 -->
    <comp-footer></comp-footer>
  </div>
</template>
<script>
import compFooter from "../components/comp-footer.vue";
import compMinbanner from "../components/comp-minbanner.vue";
import compHdserach from "../components/comp-hdsearch.vue";
import compCategory from "../components/comp-category.vue";
import compCategorywu from "../components/comp-categorywu.vue";
export default {
  name: "Category",
  data() {
    return {
      // index: 0,
      dataChild: 0, //传给子组件
      timer: "", //重新加载子组件
      parentNum: "",
      leftArrary: [
        "推荐",
        "标签",
        "台词",
        "话题",
        "专辑",
        "作者",
        "诗词",
        "节气",
        "文案",
      ],
      rightObj: [
        { img: "https://z3.ax1x.com/2021/11/04/IZASfK.jpg", title: "名人名言" },
        { img: "https://z3.ax1x.com/2021/11/04/IZAETI.jpg", title: "书籍名句" },
        { img: "https://z3.ax1x.com/2021/11/04/IZA87n.jpg", title: "小说摘抄" },
        { img: "https://z3.ax1x.com/2021/11/04/IZAUpT.jpg", title: "经典诗词" },
        { img: "https://z3.ax1x.com/2021/11/04/IZABnJ.jpg", title: "影视台词" },
        { img: "https://z3.ax1x.com/2021/11/04/IZAIHA.jpg", title: "动漫语录" },
        {
          img: "https://z3.ax1x.com/2021/11/04/IZAq9f.png",
          title: "沉浸阅读",
        },
        {
          img: "https://z3.ax1x.com/2021/11/04/IZAvuQ.jpg",
          title: "个人文案",
        },
      ],
      season: [
        {
          chun: [
            {
              time: "立春",
              dTime: "2月3-4日",
              img: "../assets/imgs/season/lichun.png",
            },
            {
              time: "雨水",
              dTime: "2月18-19日",
              img: "../assets/imgs/season/yushui.png",
            },
            {
              time: "惊蛰",
              dTime: "3月5-6日",
              img: "../assets/imgs/season/jingzhe.png",
            },
            {
              time: "春分",
              dTime: "3月20-21日",
              img: "../assets/imgs/season/chunfen.png",
            },
            {
              time: "清明",
              dTime: "4月4-6日",
              img: "../assets/imgs/season/qingming.png",
            },
            {
              time: "谷雨",
              dTime: "4月19-20日",
              img: "../assets/imgs/season/guyu.png",
            },
          ],
          xia: [
            {
              time: "立夏",
              dTime: "5月5-6日",
            },
            {
              time: "小满",
              dTime: "5月20-22日",
            },
            {
              time: "芒种",
              dTime: "6月5-6日",
            },
            {
              time: "夏至",
              dTime: "6月21-22日",
            },
            {
              time: "小暑",
              dTime: "7月7-8日",
            },
            {
              time: "大暑",
              dTime: "7月22-23日",
            },
          ],
          qiu: [
            {
              time: "立秋",
              dTime: "8月6-9日",
            },
            {
              time: "处暑",
              dTime: "8月22-24日",
            },
            {
              time: "白露",
              dTime: "9月7-8日",
            },
            {
              time: "秋分",
              dTime: "9月22-24日",
            },
            {
              time: "塞露",
              dTime: "10月7-9日",
            },
            {
              time: "霜降",
              dTime: "10月23-24日",
            },
          ],
          dong: [
            {
              time: "立冬",
              dTime: "11月7-8日",
            },
            {
              time: "小雪",
              dTime: "11月22-23日",
            },
            {
              time: "大雪",
              dTime: "12月7-8日.",
            },
            {
              time: "冬至",
              dTime: "12月21-23日",
            },
            {
              time: "小寒",
              dTime: "1月5-6日",
            },
            {
              time: "大寒",
              dTime: "1月19-21日",
            },
          ],
        },
      ],
      data8: {}, //文案数据
    };
  },
  components: {
    compHdserach,
    compMinbanner,
    compFooter,
    compCategory,
    compCategorywu,
  },
  methods: {
    //   重新加载子组件
    sendIndex(k) {
      this.dataChild = k;
      this.timer = new Date().getTime();
    },
    myRev(msg) {
      this.dataChild = msg;
    },
  },

  mounted() {
    // 数据请求
    let pro = axios.get("./data2.json");
    pro.then((res) => {
      // console.log(res.data.data.list);
      this.data8 = res.data.data.list;
    });
  },
};
</script>

<style lang="scss" scoped>
.category {
  height: 1000px;
  overflow-x: hidden;
}

.cat-container {
  display: flex;
  .con-list {
    // 左边导航列表
    position: fixed;
    top: 46px;
    left: 0;
    z-index: 99;
    width: 94px;
    height: 100%;
    background: #f8f8f8;
    ul {
      width: 94px;
      // height: 100%;
      li {
        width: 94px;
        text-align: center;
        height: 42px;
        line-height: 42px;
        font-size: 14px;
        background: #f8f8f8;
      }
      .active {
        background: #fff;
        color: skyblue;
      }
    }
  }
  //   .con-banner {
  //     position: relative;
  //     top: 46px;
  //     left: 94px;
  //     .con-wrapper {
  //       .con-slide {
  //         width: 282px;
  //         min-height: 200px;
  //       }
  //     }
  //   }
}
// 第零列
.cat-s0 {
  background: #fff;
  // 背景图 加 文字居中
  .bgTxt-list {
    width: 282px !important;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-bottom: 24px;
    li {
      position: relative;
      width: 108px;
      height: 48px;
      margin-top: 24px;
      border-radius: 5px;
      img {
        width: 108px;
        height: 48px;
        border-radius: 5px;
        object-fit: cover;
      }
      span {
        display: inline-block;
        font-size: 14px;
        position: absolute;
        top: 17px;
        left: 25px;
        color: #fff;
      }
    }
  }
  //   推荐用户
  .comp-categorywu-list-1 {
    background: #fff;
    display: flex;
    justify-content: space-around;
    li {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin: 8px 0;
      }
      span {
        font-size: 14px;
        margin: 5px 0;
      }
    }
  }
  //   近期热点
  .comp-categorywu-list-2 {
    display: flex;
    justify-content: space-around;
    li {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      img {
        width: 70px;
        height: 70px;
        border-radius: 10px;
        margin: 8px 0;
      }
      span {
        font-size: 14px;
        margin: 5px 0;
        // 超出隐藏
        display: block;
        width: 70px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }
  //   推荐作家
  .comp-category-list-1 {
    li {
      display: flex;
      justify-content: space-evenly;
      > img {
        width: 54px;
        height: 54px;
        border-radius: 8px;
        margin: 8px 0;
      }
      .cate-txt {
        width: 180px;
        > span {
          display: block;
          font-size: 14px;
          color: #000;
          padding: 13px 0 10px;
        }
        > p {
          font-size: 10px;
          color: #ccc;
          display: block;
          text-align: center;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
    }
  }
  //   推荐话题
  .comp-category-list-2 {
    margin-bottom: 200px;
    > li {
      width: 240px;
      height: 76px;
      margin: 10px auto;
      position: relative;
      > img {
        width: 240px;
        height: 76px;
        border-radius: 8px;
      }
      > p {
        width: 200px;
        height: 30px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        line-height: 30px;
        text-align: center;
        font-size: 14px;
        color: #fff;
      }
    }
  }
}
//第一列
.cat-s1 {
  // 频道
  .s1-channel {
    width: 85%;
    margin: 15px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    > li {
      width: 60px;
      height: 80px;
      margin: 5px 0;
      position: relative;
      > img {
        width: 60px;
        height: 60px;
        border-radius: 8px;
      }
      > p {
        width: 50px;
        height: 26px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 20px;
        right: 0;
        margin: auto;
        text-align: center;
        font-size: 2px !important;
        color: rgb(255, 255, 255);
      }
      > span {
        display: block;
        font-size: 12px;
        color: #000;
        width: 60px;
        margin: 2px 0;
        text-align: center;
      }
    }
  }
  //  热门
  .s1-hot {
    width: 85%;
    margin: 15px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      width: 60px;
      height: 80px;
      margin: 5px 0;
      img {
        width: 60px;
        height: 60px;
        border-radius: 8px;
      }
      span {
        display: block;
        font-size: 12px;
        color: #000;
        width: 60px;
        margin: 2px 0;
        text-align: center;
      }
    }
  }
}
// 第二列
.cat-s2 {
  .lines {
    display: flex;
    justify-content: space-evenly;

    li {
      width: 110px;
      margin: 20px 0;
      img {
        width: 110px;
        height: 70px;
        border-radius: 8px;
        object-fit: cover;
      }
      p {
        width: 100%;
        text-align: center;
        font-size: 12px;
        color: #000;
        padding: 5px 0;
      }
    }
  }
  //   近期热门
  .s2-hot {
    width: 85%;
    margin: 15px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      width: 70px;
      img {
        width: 70px;
        height: 70px;
        border-radius: 10px;
        margin: 8px 0;
        object-fit: cover;
      }
      p {
        font-size: 14px;
        margin: 5px 0;
        // 超出隐藏
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }
}
// 第三列
.cat-s3 {
  .lines {
    display: flex;
    justify-content: space-evenly;

    li {
      width: 110px;
      margin: 20px 0;
      img {
        width: 110px;
        height: 70px;
        border-radius: 8px;
        object-fit: cover;
      }
      p {
        width: 100%;
        text-align: center;
        font-size: 12px;
        color: #000;
        padding: 5px 0;
      }
    }
  }
  // 话题广场
  .lines-topic {
    > li {
      width: 240px;
      height: 76px;
      margin: 10px auto;
      position: relative;
      > img {
        width: 240px;
        height: 76px;
        border-radius: 8px;
        object-fit: cover;
      }
      > p {
        width: 200px;
        height: 30px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        line-height: 30px;
        text-align: center;
        font-size: 16px;
        color: #d6d6d6;
      }
    }
  }
  // 推荐话题
  .s3-recommend {
    li {
      display: flex;
      justify-content: space-evenly;
      > img {
        width: 54px;
        height: 54px;
        border-radius: 8px;
        margin: 8px 0;
        object-fit: cover;
      }
      .cate-txt {
        width: 180px;
        > span {
          display: block;
          font-size: 14px;
          color: #000;
          padding: 13px 0 10px;
        }
        > p {
          font-size: 10px;
          color: #ccc;
          display: block;
          text-align: center;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
    }
  }
}
// 第四列 与第二列相同
// 第五列
.cat-s5 {
  .lines {
    display: flex;
    justify-content: space-evenly;

    li {
      width: 110px;
      margin: 20px 0;
      img {
        width: 110px;
        height: 70px;
        border-radius: 8px;
        object-fit: cover;
      }
      p {
        width: 100%;
        text-align: center;
        font-size: 12px;
        color: #000;
        padding: 5px 0;
      }
    }
  }
  // 推荐作者
  .s5-author {
    li {
      display: flex;
      justify-content: space-evenly;
      > img {
        width: 54px;
        height: 54px;
        border-radius: 8px;
        margin: 8px 0;
        object-fit: cover;
      }
      .cate-txt {
        width: 180px;
        > span {
          display: block;
          font-size: 14px;
          color: #000;
          padding: 13px 0 10px;
        }
        > p {
          font-size: 10px;
          color: #ccc;
          display: block;
          text-align: center;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
    }
  }
}
// 第六列
.cat-s6 {
  .lines {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    li {
      width: 110px;
      height: 70px;
      margin: 20px 0;
      position: relative;
      border-radius: 8px;
      box-shadow: inset 0 0 20rem 0px #515151; // 需要和filter配合高斯模糊
      img {
        width: 110px;
        height: 70px;
        filter: blur(2px); //高斯模糊
        border-radius: 8px;
        object-fit: cover;
      }
      p {
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
        color: rgb(255, 255, 255);
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
      }
    }
  }
}
// 第七列
.cat-s7 {
  .s7-season {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    li {
      position: relative;
      margin-top: 16px;
      img {
        width: 110px;
        height: 110px;
        border-radius: 7px;
        object-fit: cover;
      }
      .season {
        font-size: 14px;
        position: absolute;
        left: 5px;
        bottom: 25px;
      }
      .season-time {
        font-size: 12px;
        position: absolute;
        left: 5px;
        bottom: 10px;
      }
    }
  }
}
// 第八列
.cat-s8 {
  .s8-topic {
    margin-bottom: 200px;
    > li {
      width: 240px;
      height: 76px;
      margin: 10px auto;
      box-shadow: 0 0 10px #998686;
      border-radius: 8px;
      position: relative;
      > img {
        width: 240px;
        height: 76px;
        border-radius: 8px;
        object-fit: cover;
      }
      > p {
        width: 200px;
        height: 30px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        line-height: 1.1;
        text-align: center;
        font-size: 14px;
        color: #fff;
        //
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
  }
}
</style>